// ql-padding
$padding: ql-padding;
$padding-value: 12px;

.#{$padding} {
  padding: $padding-value;
}
.#{$padding}-x {
  padding: 0 $padding-value;
}
.#{$padding}-y {
  padding: $padding-value 0;
}
.#{$padding}-left {
  padding-left: $padding-value;
}
.#{$padding}-right {
  padding-right: $padding-value;
}
.#{$padding}-top {
  padding-top: $padding-value;
}
.#{$padding}-bottom {
  padding-bottom: $padding-value;
}

// ql-margin
$margin: ql-margin;
$margin-value: 12px;

.#{$margin} {
  margin: $margin-value;
}
.#{$margin}-x {
  margin: 0 $margin-value;
}
.#{$margin}-y {
  margin: $margin-value 0;
}
.#{$margin}-left {
  margin-left: $margin-value;
}
.#{$margin}-right {
  margin-right: $margin-value;
}
.#{$margin}-top {
  margin-top: $margin-value;
}
.#{$margin}-bottom {
  margin-bottom: $margin-value;
}

// ql-align
.ql-text-left {
  text-align: left;
}
.ql-text-right {
  text-align: right;
}
.ql-text-center {
  text-align: center;
}

// width
$width-percent: 100 90 80 70 60 50 40 30 20 10;
@for $i from 1 through length($width-percent) {
  .width-per-#{nth($width-percent, $i)} {
    width: percentage(nth($width-percent, $i) / 1);
  }
}
